<DemoPageSectionComponent Id="Editors-DropDownBox-FontSelector" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">

        <label for="ddbFontSelector" class="demo-text cw-480 mb-2">Font</label>
        <DxDropDownBox @bind-Value="Value"
                       DropDownClosing="DropDownClosing"
                       QueryDisplayText="QueryText"
                       DropDownWidthMode="DropDownWidthMode.ContentWidth"
                       SizeMode="Params.SizeMode"
                       InputId="ddbFontSelector"
                       DropDownDirection="DropDownDirection.Up"
                       CssClass="cw-480 mb-1">
            <DropDownBodyTemplate>
                <div class="container templateContainer">
                    <div class="row">
                        <div class="col-6">
                            <p class="mt-3">Font Family:</p>
                            <DxListBox TData="string" TValue="string"
                                       Value="@(GetFontValue())"
                                       ValueChanged="@(s => FontValue = s)"
                                       Data="_fonts"
                                       >
                            </DxListBox>
                        </div>
                        <div class="col-6">
                            <p class="mt-3">Font Style:</p>
                            <DxListBox TData="string" TValue="string"
                                       Data="_fontStyles"
                                       Values="@(GetFontStyleValues())"
                                       ValuesChanged="@(values => FontStylesValue = values.ToList())"
                                       SelectionMode="ListBoxSelectionMode.Multiple"
                                       ShowCheckboxes="true"
                                       >
                            </DxListBox>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <p class="mt-3">Size:</p>
                            <DxSpinEdit T="int"
                                        MinValue="0"
                                        Value="@(GetFontSizeValue())"
                                        ValueChanged="@(value => FontSizeValue = value)"
                                        CssClass="templateSpinEdit"
                                        >
                            </DxSpinEdit>
                        </div>
                    </div>
                </div>
            </DropDownBodyTemplate>
            <DropDownFooterTemplate>
                <DxButton Text="OK"
                          CssClass="me-2"
                          Click="@(() => SetDropDownBoxValue(context.DropDownBox))"/>
                <DxButton Text="Cancel"
                          RenderStyle="ButtonRenderStyle.Secondary"
                          Click="@(() => context.DropDownBox.HideDropDown())"/>
            </DropDownFooterTemplate>
        </DxDropDownBox>
        
        <span style="font-size:@GetTextFontSize(); font-family:@GetTextFontFamily()" class="@GetTextClass()">
            The quick brown fox jumps over the lazy dog.
        </span>
    </ChildContentWithParameters>

    @code {
        List<string> _fonts = new() {"Times New Roman", "Arial", "Monospace", "Fantasy", "Cursive"};
        List<string> _fontStyles = new() {"Bold", "Italic", "Underline"};

        object Value { get; set; }
        string FontValue { get; set; }
        List<string> FontStylesValue { get; set; }
        int FontSizeValue { get; set; }

        void SetDropDownBoxValue(IDropDownBox dropDownBox) {
            dropDownBox.BeginUpdate();
            dropDownBox.Value = GetControlsValue();
            dropDownBox.HideDropDown();
            dropDownBox.EndUpdate();
        }

        string QueryText(DropDownBoxQueryDisplayTextContext arg) {
            var property = (FontProperties)arg.Value;
            var result = property.Font + ",";
            result += property.FontSize;
            var fontStyles = property.FontStyles;
            if(fontStyles.Count > 0)
                result += ",";

            switch(fontStyles.Count) {
                case 1:
                    result += fontStyles[0];
                    break;
                case > 1:
                    result += string.Join("/", fontStyles);
                    break;
            }
            return result;
        }

        void DropDownClosing(DropDownBoxClosingEventArgs arg) {
            ResetControlsValues();
        }

        string GetFontValue() {
            return FontValue ?? (Value as FontProperties)?.Font ?? string.Empty;
        }

        List<string> GetFontStyleValues() {
            return FontStylesValue ?? (Value as FontProperties)?.FontStyles ?? new List<string>();
        }

        int GetFontSizeValue() {
            if(FontSizeValue != 0)
                return FontSizeValue;
            return (Value as FontProperties)?.FontSize ?? 0;
        }

        string GetTextFontSize() {
            return (Value as FontProperties)?.FontSize + "px";
        }

        string GetTextFontFamily() {
            return (Value as FontProperties)?.Font;
        }

        string GetTextClass() {
            if(Value is FontProperties { FontStyles: not null } property) {
                var classes = property.FontStyles.Select(x => "dx-demo-" + x.ToLower());
                return string.Join(" ", classes);
            }
            return string.Empty;
        }

        FontProperties GetControlsValue() {
            return new FontProperties() {
                Font = GetFontValue(), FontStyles = GetFontStyleValues(), FontSize = GetFontSizeValue()
            };
        }

        void ResetControlsValues() {
            FontValue = null;
            FontStylesValue = null;
            FontSizeValue = 0;
        }

        protected override void OnInitialized() {
            Value = new FontProperties() { Font = "Monospace", FontStyles = new() {"Bold"}, FontSize = 18 };
        }

        class FontProperties {
            public string Font { get; set; }
            public List<string> FontStyles { get; set; }
            public int FontSize { get; set; }
        }
    }

</DemoPageSectionComponent>
